<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  ul{width: 400px;height:270px;background: #fff;margin: 100px auto;text-indent: 20px;}
  li{width: 100%;height: 30px;line-height: 30px;position: relative;}
  .one{margin-left: 20px;}
  .two{position: absolute;left: 230px;}
  .last{width: 36px;height: 24px;outline: none;margin-left: 30px;border-radius: 5px;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Ul = document.getElementsByTagName('ul')[0];
      var Li = Ul.getElementsByTagName("li");
      var Inp = Ul.getElementsByTagName("input");
      var Li_1 = Ul.getElementsByTagName("li")[Li.length - 1];
      var In = Li_1.getElementsByTagName("input");
      var arr = ["#05F2E3","#17F205"];
      var num = 0;
      var num1 = 0;
      function fun(){
        for (var i = 0;i < Inp.length - 4;i++){
            Inp[i].checked ?  Li[i].style.background = "#FCB7C1" : Li[i].style.background = arr[i % 2];
            num1 += Inp[i].checked; 
        }
        num1 == Inp.length - 4 ? In[0].checked = true : In[0].checked = false;
        num1 == 0 ? In[2].disabled = true : In[2].disabled = false;
        num1 == 0 ? In[3].disabled = true : In[3].disabled = false;
      }
      for (var i = 0; i < Inp.length - 4; i++){
        Inp[i].onclick = function(){
          fun();
          num1 = 0;
        }
      };
      fun();
      In[0].onclick =function(){
        for (var i = 0;i < Inp.length - 4;i++){
          this.checked ? Inp[i].checked = true : Inp[i].checked = false;
        }
        fun();  
        num1 = 0;   
      }
      In[1].onclick = function(){
        for (var i = 0;i < Inp.length - 4;i++) {
          Inp[i].checked ? Inp[i].checked = false : Inp[i].checked = true;
        };
        fun();
        num1 = 0;
      }
      for (var i = 0;i < Li.length - 1;i++){
        i % 2 ? Li[i].style.background = arr[1] : Li[i].style.background = arr[0];
        Li[i].index = i
        Li[i].onmouseover = function(){
          this.style.background = "#FCB7C1";
        }
        Li[i].onmouseout = function(){
          num = this.index
          if(this.getElementsByTagName("input")[0].checked){
            this.style.background = "#FCB7C1";
          }else{
            this.style.background = arr[num % 2];
          }
        }
      };
    }
  </script>
</head>
<body>
  <ul>
    <li><input type="checkbox"><span class="one">私奔</span><span class="two">梁博</span></li>
    <li><input type="checkbox"><span class="one">北京北京</span><span class="two">梁博、黄勇</span></li>
    <li><input type="checkbox"><span class="one">我的好兄弟</span><span class="two">小沈阳、高进</span></li>
    <li><input type="checkbox"><span class="one">亲亲</span><span class="two">梁静茹</span></li>
    <li><input type="checkbox"><span class="one">你快回来</span><span class="two">孙楠</span></li>
    <li><input type="checkbox"><span class="one">爱要有你才完美</span><span class="two">梁博、那英</span></li>
    <li><input type="checkbox"><span class="one">青花瓷</span><span class="two">周杰伦</span></li>
    <li><input type="checkbox"><span class="one">奔跑</span><span class="two">羽泉</span></li>
    <li style="background:#ccc">
      <input type="checkbox"><span class="one">全选</span>
      <input class="last" type="button" value="反选">
      <input class="last" type="button" value="添加">
      <input class="last" type="button" value="删除">
    </li>
  </ul>
</body>
</html>